<template>
	<view class="wrap">
		<u-sticky zIndex="9">
			<view class="top">
				<u-search
					placeholder="请输入赛事名称"
					v-model="keyword"
					@search="onSearch"
					@clear="onSearch"
					:showAction="false"
				></u-search>
				<u-button
					text="活动日历"
					color="#e50012"
					shape="circle"
					size="small"
					bgColor="#f1f1f1"
					customStyle="width:156rpx;margin-left:20rpx;"
					@click="onOpen"
				></u-button>
			</view>
		</u-sticky>
		<view class="list" v-if="articleList.length">
			<view
				class="news"
				v-for="item in articleList"
				:key="item"
				@click="$utils.navigateTo(false, `/pages/saishi/detail?id=${item.id}`)"
			>
				<image :src="item.img" class="news-img" mode="aspectFill"></image>
				<view class="news-right">
					<u--text :text="item.name" bold size="30rpx" lines="1" margin="16rpx 0 24rpx"></u--text>
					<u-icon
						name="map"
						color="#999"
						size="16"
						:label="item.region"
						labelSize="28rpx"
						labelColor="#999"
					></u-icon>
					<view style="margin-top: 20rpx">
						<u-icon
							name="clock"
							color="#999"
							size="14"
							:label="item.start"
							labelSize="26rpx"
							labelColor="#999"
						></u-icon>
					</view>
				</view>
				<button class="news-btn" v-if="item.status === 1">进行中</button>
				<button class="news-btn news-btn2" v-else-if="item.status === 2">已报满</button>
				<button class="news-btn news-btn3" v-else>
					{{ item.status === 0 ? '未开始' : '已结束' }}
				</button>
			</view>
			<u-loadmore :status="status" line marginTop="18" />
		</view>
		<u-empty mode="data" marginTop="300rpx" v-else text="暂无赛事"> </u-empty>
		<!-- <u-calendar
			:show="show"
			mode="single"
			color="#e50012"
			title="赛事日期选择"
			:formatter="formatter"
			@confirm="confirm"
			@close="show = false"
		></u-calendar> -->
		<uni-calendar
			ref="calendar"
			:insert="false"
			:lunar="true"
			:selected="selected"
			clearDate
			@monthSwitch="onCalendarChange"
			@confirm="confirm"
		/>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			imgUrl: app.globalData.ossUrl,
			page: 1,
			articleList: [],
			status: 'loadmore',
			keyword: '',
			datetime: '',
			show: false,
			selected: [],
			month: ''
		}
	},
	onShow() {
		this.keyword = ''
		this.datetime = ''
		this.onSearch()
	},
	onReachBottom() {
		if (this.status !== 'nomore') {
			this.page++
			this.getArticleData()
		}
	},
	methods: {
		getArticleData() {
			uni.showLoading({
				title: '数据加载中~'
			})
			this.status = 'loading'
			/* prettier-ignore */
			this.$https( false, 'post', {
					url: '/race/race/list',
					data: { 
						page: this.page, 
						size: 10, 
						keyword:this.keyword,
						datetime: this.datetime,
					}
				},
				(res) => {
					this.articleList = this.articleList.concat(res.data)
					this.status = res.data.length>9?'loadmore' :'nomore'
				}
			)
			/* prettier-ignore */
		},
		// 搜索
		onSearch(e) {
			console.log(e)
			this.page = 1
			this.articleList = []
			this.getArticleData()
		},
		// 确定日期
		confirm(e) {
			console.log(e)
			this.datetime = e.fulldate
			this.show = false
			this.onSearch()
		},
		onCalendarChange(e) {
			this.month = e.year + '-' + (e.month > 9 ? e.month : '0' + e.month)
			this.getCalendarMonthData()
		},
		async onOpen() {
			const date = new Date()
			const month = date.getMonth() + 1
			this.month = date.getFullYear() + '-' + (month > 9 ? month : '0' + month)
			await this.getCalendarMonthData()
			this.$refs.calendar.open()
		},
		getCalendarMonthData() {
			uni.showLoading({ title: '数据加载中~' })
			/* prettier-ignore */
			this.$https( false, 'get', {
				url: '/race/race/month/'+this.month,
				data: { }
			},
			(res) => {
				console.log(res)
				this.selected = res.data.map(item=>{
					return {
						date: item.race_day,
						info:'赛事'+item.race_day_num
					}
				})
			})
			/* prettier-ignore */
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	min-height: 100vh;
	position: relative;
}
.top {
	background-color: #fff;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
}
.list {
	padding: 0 26rpx;
	.news {
		display: flex;
		width: calc(100% - 40rpx);
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 24rpx 20rpx;
		position: relative;
		&-img {
			width: 204rpx;
			height: 204rpx;
		}
		&-right {
			margin-left: 26rpx;
			max-width: 460rpx;
			width: 460rpx;
		}
		&-btn {
			width: 148rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			background-color: #e50012;
			font-size: 26rpx;
			margin: 0;
			padding: 0;
			position: absolute;
			bottom: 0;
			right: 0;
			border-radius: 14rpx 0 14rpx 0;
		}
		&-btn2 {
			background-color: #bebfbf;
			color: #666;
		}
		&-btn3 {
			background-color: #bebfbf;
		}
	}
}
::v-deep {
	.uni-calendar-item--checked,
	.uni-calendar-item--isDay {
		background-color: #e50012 !important;
	}
	.uni-calendar__content,
	.uni-calendar__header {
		border-radius: 20rpx 20rpx 0 0;
	}
}
</style>
